<template>
    <div class="container">
      <div class="contain-main" v-if=showFlag>
        <el-form :model="form" ref='ruleFormRef'>
             <el-form-item label="Mark Title" prop='TitleMark'>
             <el-input v-model="form.TitleMark" placeholder="Mark Title"/>
          </el-form-item>
         <el-form-item label="Formal Title" prop="TitleFormal">
             <el-input v-model="form.TitleFormal" placeholder="Formal Title"/>
         </el-form-item>
         <el-form-item label="Short Title" prop="TitleShort">
             <el-input v-model="form.TitleShort" placeholder="Short Title"/>
         </el-form-item>
         <el-form-item label="导读" prop="Intro" >
             <el-input v-model="form.Intro" type="textarea" placeholder="New article 12"/>
         </el-form-item>
         <el-form-item label="" prop="Richtext">
             <div style="border: 1px solid #ccc; margin-bottom: 18px">
                   <Toolbar
                       style="border-bottom: 1px solid #ccc"
                       :editor="editorRef"
                       :defaultConfig="toolbarConfig"
                       :mode="mode"/>
                    <Editor
                        style="height: 180px; overflow-y: hidden;"
                        v-model="form.Richtext"
                        :defaultConfig="editorConfig"
                        :mode="mode"
                        @onCreated="handleCreated"/>
             </div>
          </el-form-item>
         <el-form-item label="Take Effect" prop="NumTE030">
           <el-select  filterable placeholder="Select" v-model="form.NumTE030">
             <el-option  v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
           </el-select>
         </el-form-item>
         <el-form-item label="Keyword" prop="Keyword">
           <el-input v-model="form.Keyword" placeholder="Keyword"/>
         </el-form-item>
         <el-form-item label="Source" prop="StrSource">
           <el-input v-model="form.StrSource" placeholder="Source"/>
         </el-form-item>
        </el-form>
      </div>
      <FileService  v-else ref="fileService" ></FileService>
      <div class="contain-footer" >
        <a href="javascript:;" @click="handleGoBack" v-if=showFlag>返回</a>
        <div calss="contain-footer-right">
            <a href="javascript:;" @click="resetForm" v-if=showFlag>重置</a>
            <a href="javascript:;" @click="fileManagement">文件管理</a>
            <a href="javascript:;" @click="onSubmit" v-if=showFlag>提交</a>
        </div>
       </div>
    </div>
    
</template>

<script setup>
import { getCurrentInstance,onBeforeUnmount,shallowRef,ref, effect} from 'vue'
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import FileService from './FileService.vue'

const {proxy}=getCurrentInstance();
let fileService=ref(null)
let componentAlbum = shallowRef();
let showFlag=ref(true);
const options = [
  {
    value: 1,
    label: '生效',
  },
  {
    value: 0,
    label: '失效',
  }]
const form = ref({}),startForm=ref({});

//文章详情数据
proxy.$HelperAxios.post('/DataAccessWithGroup/DetailedDataRow',{StrPrimaryKey:proxy.$route.query.StrPrimaryKey}
  ).then((request)=>{
    if (request.status === 200) {
      if (request.data.StatusCode ==="SuccGoal") {
        startForm.value=request.data.Payload;
        form.value = JSON.parse(JSON.stringify(startForm.value))//深拷贝
       }else{alert('请求错误')}
  }else{alert('请求错误')}
  })

//提交
const onSubmit = () => {
  ElMessageBox.alert('Data saved Successfully', 'Data Editing', {
    confirmButtonText: 'OK',
    callback: (action) => {
      ElMessage({
        type: 'success',
        message: 'Data saved Successfully',
      })
      proxy.$HelperAxios.post('/DataAccessWithGroup/UpdateDataRow',{...form.value}//解构赋值
     ).then((request)=>{
    if (request.status === 200) {
      if (request.data.StatusCode ==="SuccGoal") {
        handleGoBack()
   }else{alert('请求错误')}
  }else{alert('请求错误')}
  })
 },
  })
}

//重置
const ruleFormRef=ref();
const resetForm = () => {
  ElMessageBox.confirm(
    'Do you want to reset?',
    'Warning',
    {
      confirmButtonText: 'Yes',
      cancelButtonText: 'Cancel',
      type: 'warning',
    }
  ).then(() => {
      ElMessage({
        type: 'success',
        message: 'Reset completed',
      })
  //  ruleFormRef.value.resetFields();//全部清空
  form.value = JSON.parse(JSON.stringify(startForm.value))
    }).catch(() => {
      ElMessage({
        type: 'info',
        message: 'Reset canceled'
      })
    })
};

//返回
const handleGoBack = ()=>{
  proxy.$router.go(-1);
}

//文件管理
function fileManagement(){
  showFlag.value=!showFlag.value;
}
const editorRef = shallowRef()
 // 内容 HTML
 const valueHtml = ref('<p></p>')
 const toolbarConfig = {}
 // 组件销毁时，也及时销毁编辑器
 onBeforeUnmount(() => {
     const editor = editorRef.value
     if (editor == null) return
     editor.destroy()
 })
 const handleCreated = (editor) => {
   editorRef.value = editor // 记录 editor 实例
 }
</script>

<style scoped>
.container{
    width: 100%;
     height: 100%;
    color: gray;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* position: relative; */
}
.contain-main{
    width: 85%;
    padding: 20px;
}
.contain-footer{
    /* position: absolute;
    left: 0;
    bottom: 0;  */
    padding:20px;
    height: 30px;
    width: 100%;
    background-color: #eff2f5;
    display: flex;
    align-items: center;
    justify-content: space-between;                   
}
.contain-footer-right{
    display: flex;
    align-items: center;
    justify-content: right;   
}
.contain-footer a{
    text-decoration: none;
    padding: 0 10px;
}
::v-deep .el-form-item__label{
  font-size: 16px;
  font-weight: 500;
}
::v-deep .el-input__inner{
  height: 35px;
  color: black;
}
::v-deep .el-textarea__inner{
  font-size: 16px;
  height: 80px;
  color: black;
}

</style>